<template>
	<div>
		<el-form   :label-position="labelPosition"
		    label-width="120px"
		    class="demo-ruleForm ">
			<el-row class="container">
				<el-page-header @back="goback" content="">
				</el-page-header>
				<el-col style="margin-top: 20px;">
					<el-button v-if="breed.surplusNumber == 0">已全部出场</el-button>
					<el-button type="primary" v-if="breed.surplusNumber != 0" @click="goout">出场</el-button>
				</el-col>
				<el-col :span="12" style="margin-top:20px;">
					<el-form-item label="种苗名称：">
					    {{breed.breedName}}
					</el-form-item>
				
					<el-form-item label="出场数量：">
					    {{breed.outNumber}}
					</el-form-item>
				</el-col>
				<el-col :span="10" style="margin-top:20px;">
					<el-form-item label="养殖批号：">
					    {{breed.batch}}
					</el-form-item>
					<el-form-item label="剩余数量：">
					    {{breed.surplusNumber}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>出场详情</h3>
				<el-col :span="7" style="margin-top:20px;">
				    <el-input placeholder="出场批号/编号/客户/出场负责人" v-model="searchName" style="width:300px;">
				        <i slot="prefix" class="el-input__icon el-icon-search"></i>
				        <el-button slot="append" @click="handleSearch">搜索</el-button>
				    </el-input>
				</el-col>
				<el-col>
					<el-table
						:data="tableData"
						border
						style="margin-top:20px;"
						ref="multipleTable"
						header-cell-class-name="table-header"
					>
						<el-table-column prop="outTime" sortable label="出场日期"></el-table-column>
						<el-table-column prop="outBatch" sortable label="出场批号"></el-table-column>
						<el-table-column prop="customer" sortable label="客户"></el-table-column>
						<el-table-column prop="principalName" sortable label="出场负责人"></el-table-column>
						<el-table-column label="操作" width="150" align="center">
							<template slot-scope="scope">
							   
								<el-button
									type="text"
									style="color: red;"
									@click="handleCheck(scope.$index, scope.row)"
								>查看</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						layout="total, prev, pager, next, jumper"
						:page-size="pagesize"
						:current-page.sync="currentPage"
						:total="total"
						@current-change="handleCurrentChange"
						style="margin-top:20px"
					></el-pagination>
				</el-col>
				
			</el-row>
	
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button @click="goback">返回</el-button>
			</el-form-item>
		</el-form>
		<el-dialog title="出场明细" :visible.sync="dialogFormVisible">
			<el-form>
				<el-row>
					 <el-col :span="7" >
						<el-input placeholder="编号" v-model="searchName1" style="width:300px;">
							<i slot="prefix" class="el-input__icon el-icon-search"></i>
							<el-button slot="append" @click="handleSearch1()">搜索</el-button>
						</el-input>
					</el-col>
					
				</el-row>
		   
		    	<el-table
		    		:data="tableData1"
		    		border
		    		style="margin-top:20px;"
		    		ref="multipleTable"
		    		header-cell-class-name="table-header"
		    	>
		    		<el-table-column prop="type" sortable label="编号类型"></el-table-column>
		    		<el-table-column prop="code" sortable label="编号"></el-table-column>
		    		<el-table-column prop="sex" sortable label="性别"></el-table-column>
		    		<el-table-column label="操作" width="150" align="center">
		    			<template slot-scope="scope">
		    			   
		    				<el-button
		    					type="text"
		    					style="color: red;"
		    					@click="handleDelete(scope.$index, scope.row)"
		    				>删除</el-button>
		    			</template>
		    		</el-table-column>
		    	</el-table>
		    	<el-pagination
		    		layout="total, prev, pager, next, jumper"
		    		:page-size="pagesize"
		    		:current-page.sync="currentPage1"
		    		:total="total"
		    		@current-change="handleCurrentChange1"
		    		style="margin-top:20px"
		    	></el-pagination>
				</el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="dialogFormVisible = false">取 消</el-button>
		        <!-- <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button> -->
		    </div>
		</el-dialog>
	</div>
</template>

<script>
import { out_findByList,breed_findById,outDetail_findByList } from '@/request/breedApi';
	export default{
		data(){
			return{
				dialogFormVisible:false,
				labelPosition:'right',
				tableData:[],
				tableData1:[],
				breed:{},
				out:{},
				currentPage:1,
				total:0,
				pagesize:10,
				searchName:'',
				currentPage1:1,
				total1:0,
				pagesize1:10,
				searchName1:'',
				outId:'',
				rules:[]
			}
		},
		mounted() {
			this.init();
		},
		methods:{
			handleDelete(index,row){
				
			},
			handleCheck(index,row){
				this.outId = row.id
				this.dialogFormVisible = true
				var params = {
					"outId": this.outId,
					"searchName": this.searchName1,
					"page": this.currentPage1
				}
				outDetail_findByList(params).then((res) => {
					this.tableData1 = res.rows;
					this.total1 = res.total;
				});
			},
			init() {
				breed_findById(this.$route.query.id).then((res) => {
					this.breed = res.data;
				});
				var params = {
					"breedId": this.$route.query.id,
					"searchName": this.searchName,
					"page": this.currentPage
				}
				out_findByList(params).then((res) => {
					this.tableData = res.rows;
					this.total = res.total;
				});
			},
			goback(){
				this.$router.go(-1)
			},
			handleCurrentChange1(val){
				this.currentPage1 = val
				
			},
	
			handleCurrentChange(val) {
			    this.currentPage = val;
			    
			},
			handleSearch1(){
				var params = {
					"outId": this.outId,
					"searchName": this.searchName1,
					"page": 1
				}
				outDetail_findByList(params).then((res) => {
					this.tableData1 = res.rows;
					this.total1 = res.total;
				});		
			},
			handleSearch(){
				var params = {
					"breedId": this.$route.query.id,
					"searchName": this.searchName,
					"page": 1
				}
				out_findByList(params).then((res) => {
					this.tableData = res.rows;
					this.total = res.total;
				});
			},
			goout() {
				this.$router.push({
			    path: '/yzleave/leave',
					query: {
						id: this.$route.query.id,
						breedBatch: this.breed.batch,
						number: this.breed.surplusNumber
					}
				});
			}
		
		}
	}
</script>

<style scoped>
	.el-pagination {
	    text-align: center;
	}
</style>

